import { EllipsisOutlined, LeftOutlined, MessageOutlined, RightOutlined, UserOutlined, VideoCameraOutlined } from "@ant-design/icons";
import Popup from "../../components/Popup";
import { FriendType } from "../../components/Member";
import Render from "../../components/Render";
import Chat from "../Chat";
import { useState } from "react";

export default function Information({open = false, member, onClose}: {
    open: boolean;
    member: FriendType;
    onClose: () => void;
}) {
    const [visible, setVisible] = useState(false);

    return <>
        <Popup open={open} closeable={false}>
            <div className="flex flex-col h-screen w-screen bg-gray-100">
                <div className="px-4 h-12 flex items-center justify-between border-b bg-white">
                    <div className="text-xl h-12 flex items-center" onClick={onClose}>
                        <LeftOutlined />
                    </div>
                    <div className="text-xl h-12 flex items-center">
                        <EllipsisOutlined />
                    </div>
                </div>
                <div className="flex flex-col gap-4">
                    <div className="p-4 flex gap-6 bg-white border-b">
                        <div className="w-24 h-24 flex items-center justify-center bg-gray-100 shrink-0">
                            <img src={member.avatar} alt="user avatar" className="w-full h-full rounded" />
                        </div>
                        <div className="flex flex-col gap-2">
                            <div className="flex gap-4 text-xl font-medium">
                                <div>{member.username}</div>
                                <div className={`${member.gender === '1' ? 'text-blue-500' : 'text-red-500'}`}><UserOutlined /></div>
                            </div>
                            <div>编号: #{member.id}</div>
                            <div>地区: 中国 四川</div>
                            <div>注册时间: <Render.Date value={member.createdAt} /></div>
                        </div>
                    </div>
                    <div className="divide-y border-y bg-white">
                        <div className="flex p-4 justify-between items-center">
                            <div>设置备注和标签</div>
                            <RightOutlined />
                        </div>
                        <div className="flex p-4 justify-between items-center">
                            <div>朋友权限</div>
                            <RightOutlined />
                        </div>
                    </div>
                    <div className="divide-y border-y bg-white">
                        <div className="flex p-4 gap-2 justify-center items-center" onClick={() => setVisible(true)}>
                            <MessageOutlined />
                            <div>发消息</div>
                        </div>
                        <div className="flex p-4 gap-2 justify-center items-center">
                            <VideoCameraOutlined />
                            <div>音视频通话</div>
                        </div>
                    </div>
                </div>
            </div>
        </Popup>

        <Chat open={visible} onClose={() => setVisible(false)} title={member.username} friend={member} />
    </>;
}